<template>
  <div class="page">
    <CommonList :requestUrl="requestUrl" :columns="columns" :queryFormItems="queryFormItems">
      <template v-slot:avatar>
        <el-table-column prop="avatar" label="头像" align="center">
          <template #default="{ row }">
            <el-avatar
              :src="row.avatar"
              style="width: 60px; height: 60px; display: block; margin: 0 auto"
            />
          </template>
        </el-table-column>
      </template>
      <template v-slot:platform>
        <el-table-column prop="platform" label="来源" align="center">
          <template #default="{ row }">
            <el-tag effect="dark">{{ _options.getVal('user_source', row.platform) }}</el-tag>
          </template>
        </el-table-column>
      </template>
    </CommonList>
  </div>
</template>
<script lang="ts" setup>
import CommonList from '@/components/CommonList.vue'
import { inject } from 'vue'

const _options: any = inject('_options')

const requestUrl = 'userList'

const columns = [
  { prop: 'avatar', label: '头像', slot: 'avatar' },
  { prop: 'nickname', label: '昵称' },
  { prop: 'platform', label: '来源', slot: 'platform' },
  { prop: 'openid', label: '标识' },
  { prop: 'create_time', label: '注册时间' }
]
const queryFormItems = [
  { prop: 'nickname', label: '昵称' },
  { prop: 'platform', label: '来源', type: 'option', optionName: 'user_source' }
]
</script>
